<template>
  <div class="nb-transfer-wrap">
    <panel
      ref="leftPanel"
      :title="titles[0] || 'Source'"
      :data="sourceData"
      :fieldKey="fieldKey"
      :default-checked="leftDefaultChecked"
      @checked-change="onSourceCheckedChange"></panel>
    <div class="transfer-buttons">
      <el-button
        type="primary"
        class="btn btn-primary"
        @click.native="addToLeft"
        :disabled="rightChecked.length === 0">
        <i class="el-icon-arrow-left"></i>
      </el-button>
      <el-button
        type="primary"
        class="btn btn-primary"
        @click.native="addToRight"
        :disabled="leftChecked.length === 0">
        <i class="el-icon-arrow-right"></i>
      </el-button>
    </div>
    <panel
      ref="rightpanel"
      :title="titles[1] || 'Target'"
      :data="targetData"
      :fieldKey="fieldKey"
      :default-checked="leftDefaultChecked"
      @checked-change="onTargetCheckedChange"
      @order-change="onOrderChange"></panel>
  </div>
</template>

<script>
import {
  each,
  map,
  remove
} from 'lodash'
import Panel from './panel'
export default {
  name: 'ComponentFieldTransfer',
  props: {
    data: {
      type: Array,
      default () {
        return []
      }
    },
    // v-model绑定的值
    // 通过this.$emit('input', 'current-value')来同步到父组件
    value: {
      type: Array,
      default () {
        return []
      }
    },
    titles: {
      type: Array,
      default () {
        return ['不显示字段', '显示字段']
      }
    },
    leftDefaultChecked: {
      type: Array,
      default () {
        return []
      }
    },
    rightDefaultChecked: {
      type: Array,
      default () {
        return []
      }
    },
    fieldKey: {
      type: Object,
      default () {
        return {
          label: 'propDesc',
          key: 'id',
          disabled: 'required',
          name1: 'propName',
          name2: 'headerKey'
        }
      }
    }
  },
  data () {
    return {
      leftChecked: [],
      rightChecked: [],
      cloneValue: this.value
    }
  },
  watch: {
    value () {
      this.cloneValue = this.value
    }
  },
  components: {
    Panel
  },
  computed: {
    sourceData () {
      return this.data.filter(item => {
        return map(this.cloneValue, this.fieldKey.key).indexOf(item[this.fieldKey.key]) === -1
      })
    },
    targetData () {
      return this.cloneValue.slice()
    }
  },
  methods: {
    onSourceCheckedChange (val) {
      this.leftChecked = val
    },
    onTargetCheckedChange (val) {
      this.rightChecked = val
    },
    addToLeft () {
      let currentValue = this.cloneValue.slice()
      this.rightChecked.forEach(item => {
        remove(currentValue, o => o[this.fieldKey.key] === item)
      })
      this.$emit('input', currentValue)
      this.$emit('change', this.rightChecked, 'left')
      this.$refs.rightpanel.reset()
    },
    addToRight () {
      let currentValue = this.cloneValue.slice()
      currentValue = [...currentValue, ...this.buildLeftList(this.leftChecked)]
      this.$emit('input', currentValue)
      this.$emit('change', this.leftChecked, 'right')
      this.$refs.leftPanel.reset()
    },
    buildList (list, source) {
      let arr = []
      each(list, item => {
        let itm = source.filter(o => o[this.fieldKey.key] === item)[0]
        if (itm) {
          arr.push(itm)
        }
      })
      return arr
    },
    buildLeftList (list) {
      return this.buildList(list, this.sourceData)
    },
    buildRightList (list) {
      return this.buildList(list, this.targetData)
    },
    onOrderChange (checked) {
      this.$emit('input', this.buildRightList(checked))
    }
  }
}
</script>

<style lang="scss">
@import 'style.scss';
</style>
